<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script th:src="@{../assets/jquery/jquery.js}"></script>
    <link type="text/css" th:href="@{../assets/css/theme.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/js/bootstrap.js}"></script>
    <script src="https://kit.fontawesome.com/7a1d53a13a.js" crossorigin="anonymous"></script>
    <style>
        body {
            padding-top: 0px; /* 通过增加顶部padding来向下移动整个页面内容 */
            background-size: 100%;
        }

        .container {
            margin-top: 0px; /* 通过增加顶部margin来向下移动特定的容器 */
        }

        .form-control.error {
            border-color: #e74c3c; /* 红色边框 */
            border-width: 2px;
        }

        .error-message {
            color: #e74c3c; /* 红色文字 */
            font-size: 1em;
            margin-top: 0.25em;
        }

    </style>
    <title>Title</title>
</head>
<body th:style="'background-image: url(../assets/images/backgrounds/img5.png)'">

<div class="container d-flex align-items-center no-padding">
    <div class="col">
        <div class="row align-self-center">
            <div class="col-lg-6 offset-lg-8">
                <div class="card bg-gradient-purple text-white">
                    <div class="card-body">
                        <span class="clearfix"></span>
                        <img src="../assets/images/brand/gamepad-solid.svg" style="width: 50px;">

                        <h4 class="heading h3 text-white pt-3 pb-5">账号注册
                        </h4>
                        <form class="form-primary" id="form">
                            <div class="form-group">
                                <label for="username" class="form-label">账号</label>
                                <input type="text" class="form-control" id="username" placeholder="账号" >
                                <small class="error-message"></small>
                            </div>
                            <div class="form-group">
                                <label for="input_password" class="form-label">密码</label>
                                <input type="password" class="form-control" id="input_password" placeholder="密码" >
                                <small class="error-message"></small>
                            </div>
                            <div class="form-group">
                                <label for="rinput_password" class="form-label">再次输入密码</label>
                                <input type="password" class="form-control" id="rinput_password" placeholder="密码" >
                                <small class="error-message"></small>
                            </div>
                            <div class="form-group">
                                <label for="input_qq" class="form-label">QQ号</label>
                                <input type="text" class="form-control short-input" id="input_qq" placeholder="QQ号" name="QQ">
                                <small class="error-message"></small>
                            </div>
                            <div class="form-group">
                                <label for="verifycode" class="form-label">验证码</label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="verifycode" placeholder="验证码" name="code" aria-describedby="basic-addon2">
                                    <div class="input-group-append">
                                        <input type="button" class="btn btn-outline-light get-code-btn" id="fetchDataBtn" onclick="settime(this)" value="获取验证码"></input>
                                    </div>
                                </div>
                                <small class="error-message"></small>
                            </div>
                            <div class="text-right mt-4"><a th:href="@{/to/login}" class="text-white">返回登录</a></div>
                            <button type="submit" class="btn btn-block btn-lg bg-white mt-4">注册并登录</button>
                            <div class="form-group">
                                <div class="custom-control custom-radio mb-3">
                                    <input type="radio" name="custom-radio-1"  class="custom-control-input" id="customRadio2" checked="">
                                    <label class="custom-control-label" for="customRadio2">
                                        已阅读并同意<a th:href="@{/to/protocal}">《电竞社交平台用户协议》</a>
                                    </label>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>
<script>
    $(document).ready(function() {
        // Disable the "获取验证码" button initially
        $('#fetchDataBtn').prop('disabled', true);

        // Enable the button only if QQ number is not empty
        $('#input_qq').on('input', function() {
            validateQQ();
            toggleFetchDataBtn();
        });

        // Function to toggle the "获取验证码" button
        function toggleFetchDataBtn() {
            const qq = $('#input_qq').val().trim();
            if (qq === '') {
                $('#fetchDataBtn').prop('disabled', true);
            } else {
                $('#fetchDataBtn').prop('disabled', false);
            }
        }

        // 当按钮被点击时，执行 Ajax 请求
        $('#fetchDataBtn').click(function(e) {
            e.preventDefault(); // 阻止表单提交

            // 获取用户输入的 QQ 号
            var qq = $('#input_qq').val();

            // 发起 GET 请求到服务器端接口
            $.ajax({
                url: "http://localhost:8080/email/sendEmail",
                method: 'GET',
                data: { emailReceiver: qq },
                success: function(data) {
                    // 成功接收到响应后执行的回调函数
                    alert('验证码已发送，请查收');
                },
                error: function(xhr, status, error) {
                    // 请求失败时执行的回调函数
                    console.error('Ajax 请求失败：', status, error);
                }
            });

            // 启动倒计时
            settime(this);
        });

        // 表单提交事件
        $('#form').submit(function(e) {
            e.preventDefault();
            validateForm();
        });

        // 实时验证
        $('#username').on('input', function() {
            validateUsername();
        });

        $('#input_password').on('input', function() {
            validatePassword();
            validatePasswordConfirm(); // 确保密码和确认密码一致
        });

        $('#rinput_password').on('input', function() {
            validatePasswordConfirm();
        });

        $('#input_qq').on('input', function() {
            validateQQ();
        });

        $('#verifycode').on('input', function() {
            validateVerifyCode();
        });

        // 验证用户名
        function validateUsername() {
            const username = $('#username').val().trim();
            if (username === '' || /\s/.test(username)) {
                printError($('#username'), '请输入有效的用户名');
            } else {
                removeError($('#username'));
            }
        }

        // 验证密码
        function validatePassword() {
            const password = $('#input_password').val().trim();
            if (password === '' || /\s/.test(password)) {
                printError($('#input_password'), '请输入有效的密码');
            } else {
                removeError($('#input_password'));
            }
        }

        // 验证确认密码
        function validatePasswordConfirm() {
            const password = $('#input_password').val().trim();
            const passwordConfirm = $('#rinput_password').val().trim();
            if (passwordConfirm === '' || /\s/.test(passwordConfirm)) {
                printError($('#rinput_password'), '请确认有效的密码');
            } else if (password !== passwordConfirm) {
                printError($('#rinput_password'), '两次输入的密码不一致，请重新输入');
            } else {
                removeError($('#rinput_password'));
            }
        }

        // 验证QQ号
        function validateQQ() {
            const qq = $('#input_qq').val().trim();
            if (qq === '' || /\s/.test(qq)) {
                printError($('#input_qq'), '请输入有效的QQ号');
            } else {
                removeError($('#input_qq'));
            }
        }

        // 验证验证码
        function validateVerifyCode() {
            const verifycode = $('#verifycode').val().trim();
            if (verifycode === '' || /\s/.test(verifycode)) {
                printError($('#verifycode'), '请输入有效的验证码');
            } else {
                removeError($('#verifycode'));
            }
        }

        // 表单验证
        function validateForm() {
            validateUsername();
            validatePassword();
            validatePasswordConfirm();
            validateQQ();
            validateVerifyCode();

            // 如果所有验证都通过，则提交表单
            if ($('.form-control.error').length === 0) {
                alert('表单验证通过，提交表单');
                this.submit();
            }
        }

        // 打印错误提示
        function printError(input, message) {
            const formControl = input.closest('.form-group');
            const errorMessage = formControl.find('.error-message');
            formControl.addClass('error');
            input.addClass('error');
            errorMessage.text(message);
        }

        // 删除错误提示（用户输入正确信息）
        function removeError(input) {
            const formControl = input.closest('.form-group');
            formControl.removeClass('error');
            input.removeClass('error');
            formControl.find('.error-message').text('');
        }

        // 倒计时函数
        var countdown = 60;
        function settime(val) {
            if (countdown === 0) {
                val.removeAttribute("disabled");
                val.value = "获取验证码";
                countdown = 60;
                return false;
            } else {
                val.setAttribute("disabled", true);
                val.value = "重新发送(" + countdown + ")";
                countdown--;
            }
            setTimeout(function() {
                settime(val);
            }, 1000);
        }
    });
</script>